<template>
  <div>
    <crumb isShowBack/>
    <div class="main-contianer3 caseManage">
      <div class="top-content">
        <div class="main">
          <div class="main-left">
            <div class="case-tip">案例要求</div>
            <div class="case-con">
              <span>{{cases.caserequest}}</span>
            </div>
            <div class="case-tip">案例背景</div>
            <el-carousel trigger="click" height="500px" :loop="false">
              <el-carousel-item v-for="(item, index) in cases.resourceCaseBgList" :key="index">
                <!-- 纯文本 -->
                <div class="media-box" v-if="item.displayType === '1'">
                  <div class="case-con">{{item.resourceCaseContentEn}}</div>
                </div>
                <!-- 图片 -->
                <div class="media-box" v-if="item.displayType === '2'">
                  <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
                </div>
                <!-- 音频 -->
                <div class="media-box" v-if="item.displayType === '3'">
                  <audio class="audio" controls :src="item.fileUrl"></audio>
                </div>
                <!-- 视频 -->
                <div class="media-box" v-if="item.displayType === '4'">
                  <video class="video" controls :src="item.fileUrl">
                    <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
                  </video>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="main-right">
            <div class="comment-state">
              只显示未评分
              <el-checkbox v-model="value" @change="handleCheck"></el-checkbox>
            </div>
            <div class="comment-box" v-for="(item, index) in stuCaseList" :key="index" @click="handleComment(item.batchId)" style="cursor: pointer;">
              <img :src="item.headImgUrl" alt="" class="comment-logo">
              <div class="comment-con" style="width: 250px;">
                <div class="comment-name">{{item.userName}}</div>
                <el-button type="text" icon="el-icon-time" size="mini" class="comment-time">{{item.finishedTime}}&nbsp;用时：{{item.duration}}</el-button>
              </div>
              <el-tag type="success" v-if="item.isScored==='1'" style="width: 60px;text-align: center;">{{item.score}}分</el-tag>
              <el-tag type="info" v-else style="width: 60px;text-align: center;">未评分</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
    <comment-box :resourceCaseId="cases.resourceCaseId" :batchId="batchId" v-if="isShowComment" @handleEmit="handleCommentClose"/>
  </div>
</template>

<script>
import { caseAnalyseMain } from '@/api/teacher/manage/casemanage'
import commentBox from './commentBox'
export default {
  name: 'caseManageView',
  data () {
    return {
      id: this.$route.query.id,
      cases: {
        resourceCaseId: '',
        resourceLessonName: '',
        caserequest: '',
        casetitle: '',
        className: '',
        resourceCaseBgList: [],
        stuCaseList: []
      },
      stuCaseList: [],
      value: false,
      // 评分
      isShowComment: false,
      batchId: undefined
    }
  },
  mounted () {
    this.caseAnalyseMain()
  },
  methods: {
    async caseAnalyseMain () {
      const res = await caseAnalyseMain({
        resourceCaseId: this.id
      })
      if (res.code === '200') {
        this.cases = res.data
        this.stuCaseList = this.cases.stuCaseList = this.cases.stuCaseList.map(item => ({
          batchId: item.batchId,
          duration: this.returnDate(item.duration),
          finishedTime: item.finishedTime,
          headImgUrl: item.headImgUrl,
          isScored: item.isScored,
          score: item.score,
          userName: item.userName
        }))
      } else {
        this.$message.error(res.message)
      }
    },
    handleCheck () {
      if (this.value) {
        this.stuCaseList = this.cases.stuCaseList.filter(item => item.isScored === '0')
      } else {
        this.stuCaseList = this.cases.stuCaseList
      }
    },
    handleComment (batchId) {
      this.batchId = batchId
      this.isShowComment = true
    },
    handleCommentClose (params) {
      if (params) {
        this.caseAnalyseMain()
      }
      this.isShowComment = false
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  },
  components: {
    commentBox
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .main {
      width: 1200px;
      margin: 0 auto;
      .main-left {
        width: 760px;
        height: 700px;
        float: left;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 5px;
        overflow: auto;
      }
      .main-right {
        width: calc(100% - 760px - 10px);
        height: 700px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 5px;
        float: right;
        padding: 0 0 10px;
        position: relative;
        overflow-y: scroll;
      }
    }
  }
}
</style>
